<template>
  <div class="stayComplete">
    <!-- 最高库存预警报表 -->
    <div class="inst">
    <el-row >
      <el-col :span="23" style="padding : 0px 0 10px 10px">
        <div class="date">
          <div class="icon"></div>
          <input type="date" v-model="date" class="date-main">
        </div>
        <div class="code">
          <input type="text" v-model="code1" placeholder="起始物料代码">至
          <input type="text" v-model="code2" placeholder="截止物料代码">
        </div>
        <div style="margin-top:10px">
          <label for="" class="text">可销售天数：</label>
          <el-input-number class="select" v-model="days" @change="handleChange" :min="1" :max="2000" label="最高库存可销售天数"></el-input-number>
          <input type="button" class="search" @click="cc" value="查询">
        </div>
      </el-col>
    </el-row>
      <el-row>
        <el-col >
          <el-table :data="tableData" stripe  height="400">
            <el-table-column fixed prop="产品代码" label="产品代码" width="100">
            </el-table-column>
            <el-table-column prop="产品名称" label="产品名称" show-overflow-tooltip width="150" align="center">
            </el-table-column>
            <el-table-column prop="规格型号" label="规格型号" show-overflow-tooltip width="150"  align="center">
            </el-table-column>
            <el-table-column prop="单位" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="现存量" label="现存量" align="center">
            </el-table-column>
            <el-table-column prop="近三个月日均出库量" label="近三个月日均出库量" align="center">
            </el-table-column>
            <el-table-column prop="可销售天数" label="可销售天数" align="center">
            </el-table-column>
            <el-table-column prop="备注" label="备注" align="center">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
          <!-- 当前页 -->
          <span style="color:#9C9EA3;line-height:28px">当前页：{{currentPage+1}}</span>
          <el-col :span="20">
            <el-button-group style="float:right">
              <!-- 上页 -->
              <el-button @click="handleCurrentChange(-1)"  :disabled="currentPage==0" size="mini" icon="arrow-left">上页</el-button>
              <!-- 下页 -->
              <el-button @click="handleCurrentChange(1)"  :disabled="!nextPage" size="mini">下页
              </el-button>
            </el-button-group>
          </el-col>
      </el-row>
  </div>
  </div>
</template>
<script> 
import * as moment from 'moment';
export default {
  name: "component_name",
  data() {
    return {
        tableData:[],
        days: '',
        date:'',
        code1:'',
        code2:'',
        limit:15,
        currentPage: 0,
        nextPage:false
    };
  },
  methods: {
    handleCurrentChange(val) {
       this.currentPage = val ? this.currentPage + val : 0;
       this.initList() ;
    },
    handleChange(value) {
        this.days=value
    },
   cc  () {
     if(!this.date){
       this.$ddapi.toast('请选择查询日期');
       return;
     }
     if(!this.code1){
       this.$ddapi.toast('请选择起始物料代码');
       return;
     }
     if(!this.code2){
       this.$ddapi.toast('请选择截止物料代码');
       return;
     }
     
     if(!this.days){
       this.$ddapi.toast('请选择可销售天数');
       return;
     }
     this.currentPage=0;
     this.initList('cc') ;
   },
   initList:function(cc){
     this.$http.post('api/product/queryProductMaxWarming',{
       start:this.currentPage,limit:this.limit,date:this.date,
       days: this.days,code1:this.code1,code2:this.code2
       }).then(res=>{
       let result = res.data;
       if(result.code==100){
         this.tableData = result.data;
          if(cc == 'cc'){
           this.$ddapi.toast('查询成功');
         }
         if(this.tableData.length>this.limit){
          this.nextPage=true
          this.tableData=this.tableData.splice(0,this.limit)
        }else{
          this.tableData=this.tableData.splice(this.limit-1,this.limit)
          this.nextPage=false
        }
       }
       if(result.code == 101){
          this.tableData = [] ;
          this.$ddapi.toast('暂无数据');
       }
     })
   },
   toast : function (msg) {
     dd.device.notification.toast({
        icon: '', //icon样式，有success和error，默认为空 0.0.2
        text: msg, //提示信息
        onSuccess : function(result) {
            /*{}*/
        },
        onFail : function(err) {}
    })
   }
  },
  created: function() {
       this.date = moment().subtract(1, "M").format('YYYY-MM-DD');
      //  this.initList('');
  }
};
</script>
<style lang="css" scoped>
.stayComplete {
  margin-top: 0.8rem;
}
.workBox {
  width: 100%;
  border-bottom: 1px solid #f8f8f8;
  position: absolute;
  z-index: 9999;
  margin-bottom: 1rem;
}

.over {
  width: 100%;
  height: 3.5rem;
  line-height: 3.7rem;
  font-size: 1.3rem;
  color: #fff;
  text-align: center;

  letter-spacing: 0.92px;
  background: #175aa9;
  color: #fff;
}

.over {
  position: absolute;
  right: 0;
  top: 0rem;
}
.text{
    display: inline-block;
    width: 30%;
    font-size: 1.3rem;
    color: #9d9d9d;
    text-align: center;
}
.select{
    width:120px;
}
.date{
  width: 50%;
  height: 40px;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  font-size: 1.2rem;   
}
.date>.icon{
  width: 1.4rem;
  height: 1.5rem;
  position: absolute;
  background:url('../../static/images/icon-date.png')no-repeat center/contain;
  left: 12rem;
  top:0;
  bottom: 0;
  margin:auto;
}
.date-main{
  width: 100%;
  height: 100%;
  padding-left: 8%;
}
.code{
  width: 100%;
  height: 40px;
  color: #9d9d9d;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 40px;
  font-size: 1.2rem;  
}
.code>input{
  width: 42%;
  padding-left: 10%;
}
.search{
  float: right;
  width: 30%;
  height: 30px;
  margin-top: 5px;
  line-height: 30px;
  border: 1px solid #1759A8;
  color: #1759A8;
  box-sizing: border-box;
  font-size: 1.2rem;
}
</style>